<template>
  <div class="commer">
    <div class="commer-title">发票管理</div>
    <div class="commer-content">
      <div class="distribution-box-search">
        <a-input-search placeholder="搜索订单单号/发货编号/订单编号/物料编号/物料名称"
                        @search="onSerch"
                        @change="onSerch"
                        v-model="form.searchName"
                        class="input-search">
          <a-icon slot="prefix"
                  type="search" />
          <a-button slot="enterButton">
            搜索
          </a-button>
        </a-input-search>
        <div class="search-button">
          <i v-if="moreFormStatus"
             @click="moreFormStatus = false"><img src="../../../assets/image/sellerHub/shaixuan2.png"
                 alt=""></i>
          <i v-if="!moreFormStatus"
             @click="moreFormStatus = true"><img src="../../../assets/image/sellerHub/shaixuan.png"
                 alt=""></i>
        </div>
      </div>
      <div class="formBox"
           v-if="!moreFormStatus">
        <div class="sanjiao"></div>
        <span style="font-size:12px">账期：
          <a-select v-model="form.accountPeriod"
                    @change="onSerch()"
                    placeholder="请选择账期"
                    style="width:184px"
                    allowClear>
            <a-select-option v-for="item in timeArr"
                             :value="item"
                             :key="item.id">
              {{item}}
            </a-select-option>
          </a-select>
        </span>
        <div class="more-form-button">
          <a-button @click="onReset"
                    type="link">
            重置
          </a-button>
          <a-button @click="onSerch"
                    type="danger">
            查询
          </a-button>
        </div>
      </div>
      <div class="content-table">
        <div @click="gettable(null)"
             :class="{'isColor':form.status === null }">全部<i>(10)</i></div>
        <div @click="gettable(0)"
             :class="{'isColor':form.status === 0 }">待开票<i>(13)</i></div>
        <div @click="gettable(1)"
             :class="{'isColor':form.status === 1 }">已开票<i>(13)</i></div>
      </div>
      <div class="tables">
        <a-table :columns="columns"
                 :data-source="data"
                 :pagination="false"
                 v-if="data.length>0">
          <span slot="code"
                slot-scope="text, record">
            <div style="color:#1876ff;cu">{{record.code}}</div>
          </span>
          <span slot="invoiceStatusEnum"
                slot-scope="text, record">
            <div class="ages"
                 v-if="record.invoiceStatusEnum == 'UN'">待开票</div>
            <div class="ages1"
                 v-if="record.invoiceStatusEnum == 'YES'">已开票</div>
          </span>
          <span slot="action"
                slot-scope="text, record"
                class="content-action">
            <div v-if="record.invoiceStatusEnum == 'UN'"
                 class="records-status"
                 @click="makeInvoice(record,1)"><img src="../../../assets/image/sellerHub/qrkp.png"
                   alt=""> 确认开票</div>
            <div v-if="record.invoiceStatusEnum == 'YES'"
                 class="records-status"
                 @click="makeInvoice(record,2)"><img src="../../../assets/image/sellerHub/ckxq.png"
                   alt=""> 查看详情</div>
          </span>
        </a-table>

        <div v-if="data.length === 0"
             class="zanwu">
          <img src="../../../assets/image/sellerHub/zanwuxinxi.png"
               alt="">
          <p>暂无信息</p>
        </div>
      </div>
    </div>
    <div class="content-foot">
      <pagination @pageChange="pageChange"
                  :total="total"
                  :current="current"></pagination>
    </div>
    <!-- //新建表单 -->
    <invoiceAdd ref="invoicePackage"
                :visible="invoice"
                @billOK="billOK"
                @cancel="invoice = false">
    </invoiceAdd>
  </div>
</template>
<script>
import pagination from '@/components/common/pagination.vue'
import invoiceAdd from "./components/invoiceAdd";
const columns = [
  {
    title: '账期',
    dataIndex: 'accountPeriod',
    key: 'accountPeriod',
  },
  {
    title: '服务网点',
    dataIndex: 'tenantName',
    key: 'tenantName',

  },
  {
    title: '对账单号',
    dataIndex: 'code',
    key: 'code',
    ellipsis: true,
    scopedSlots: { customRender: 'code' },
  },
  {
    title: '发票抬头',
    dataIndex: 'title',
    key: 'title',
    ellipsis: true,
  },

  {
    title: '订单数',
    dataIndex: 'subOrderNum',
    key: 'subOrderNum',
    ellipsis: true,
  },
  {
    title: '状态',
    dataIndex: 'invoiceStatusEnum',
    key: 'invoiceStatusEnum',
    ellipsis: true,
    scopedSlots: { customRender: 'invoiceStatusEnum' },
  },
  {
    title: '操作',
    key: 'action',
    align: 'center',
    width: 120,
    scopedSlots: { customRender: 'action' },
  },
];

const data = [];
export default {
  components: {
    pagination,
    invoiceAdd
  },
  data () {
    return {
      form: {
        accountPeriod: undefined,
        pageNo: '1',
        pageSize: '10',
        searchName: '',
        tenantId: '',
        status: null
      },
      columns,
      data,
      total: 10,
      current: 1,
      moreFormStatus: false,
      invoice: false,
      tenantId: '',
      timeArr: [],
    }
  },
  mounted () {
    this.getList()
    this.getTimeList()
  },
  methods: {
    getList () {
      this.form.tenantId = this.currentTenant.id
      this.$store.dispatch('request', this.$api.sellerCenter.invoicePage(this.form)).then(res => {
        console.log(res);
        this.data = res.result.records
        for (var i = 0; i < this.data.length; i++) {
          this.data[i].accountPeriod = this.data[i].accountPeriod.split('T')[0]
        }
      })
    },
    //获取账期列表
    getTimeList () {
      this.$store.dispatch('request', this.$api.sellerCenter.serviceFeeTime(this.form)).then(res => {
        this.timeArr = res.result
      })
    },
    pageChange (val) {

    },
    gettable (e) {
      this.form.status = e
      this.getList()
    },
    //缺人开票
    makeInvoice (item, status) {
      this.invoice = true
      this.$refs.invoicePackage.getList(item, status);
    },
    //确定新增开票
    billOK () {
      this.invoice = false
      this.getList()
    },
    onSerch () {
      this.getList()
    },
    onReset () {
      this.form.searchName = undefined
      this.form.accountPeriod = undefined
      this.getList()
    },
  },
  computed: {
    tokenValue () {
      return this.$store.state.user.tokenValue
    },
    currentTenant () {
      return this.$store.state.user.currentTenant
    },
  },
  watch: {
    tokenValue (newVal) {
      this.isShow = !newVal;
    }
  }
}
</script>
<style lang="less" scoped>
.commer {
  height: 100%;
  .commer-title {
    height: 54px;
    width: 100%;
    background: #fff;
    padding-left: 24px;
    line-height: 54px;
    font-size: 16px;
    font-family: PingFangSC, PingFangSC-Medium;
    font-weight: 500;
    color: @newColorGreyFontM;
    margin-bottom: 16px;
  }
  .commer-content {
    margin: 16px;
    margin-bottom: 0;
    background: #fff;
    height: calc(100% - 156px);
    padding: 24px;
    box-shadow: 0px 1px 0px 0px #f4f5f8 inset;
    .content-search {
      margin-bottom: 16px;
      /deep/ .ant-input-group-wrapper {
        width: 480px;
        .ant-input-group {
          width: 480px;
          .ant-input {
            height: 32px;
            line-height: 32px;
            border: 1px solid @newBorder;
          }
          .ant-btn-lg {
            height: 32px;
            font-size: 12px;
            color: @newColorGreyFontM;
            border: 1px solid @newBorder;
          }
        }
      }
    }
    .content-tit {
      height: 80px;
      border-radius: 2px;
      box-shadow: 0px 0px 6px 1px rgba(39, 36, 36, 0.08);
      padding-top: 24px;
      padding-left: 28px;
      margin-bottom: 32px;
      padding-right: 24px;
      span {
        margin-right: 58px;
      }
      .tit-button {
        float: right;
      }
    }
    .content-table {
      overflow: hidden;
      border-bottom: 1px solid @newBorderS;
      color: @newColorGreyFontM;
      margin-bottom: 16px;
      > div {
        font-size: 14px;
        margin-right: 40px;
        cursor: pointer;
        font-weight: 500;
        float: left;
        line-height: 14px;
        padding-bottom: 16px;
        i {
          padding-left: 8px;

          font-style: normal;
          font-size: 12px;
        }
      }
    }
  }
  .content-foot {
    position: fixed;
    left: 173px;
    bottom: 0;
    right: 16px;
    // width: calc(100vw - 193px);
    background-color: #fff;
    box-sizing: border-box;
    box-shadow: 0px 1px 0px 0px #f4f5f8 inset;
    height: 72px;
    background: #fff;
    padding: 24px;
    // margin: 0 16px;
    .pagination-inline {
      float: right;
    }
  }
}
.zanwu {
  text-align: center;
  margin-top: 100px;
  p {
    font-size: 12px;
    margin-top: 30px;
  }
}
.isColor {
  color: @activeRed;
  border-bottom: 3px solid @activeRed;
}
.ages {
  width: 60px;
  height: 26px;
  background: #fff7eb;
  line-height: 26px;
  font-size: 12px;
  color: #ff9003;
  text-align: center;
  border-radius: 2px;
}
.ages1 {
  width: 60px;
  height: 26px;
  background: #f5fbf3;
  line-height: 26px;
  font-size: 12px;
  color: #79c860;
  text-align: center;
  border-radius: 2px;
}

/deep/ .ant-table-thead {
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: 500;
  > tr > th {
    padding: 13px 16px;
  }
}
/deep/ .ant-table-tbody {
  > tr > td {
    padding: 8px 16px;
    border-bottom: 1px solid @newBorder;
    .ant-btn {
      width: 60px;
      height: 24px;
      background: #fafafa;
      color: @newColorGreyFontM;
      font-size: 12px;
      padding: 0;
    }
  }
}
.more-form-button {
  position: absolute;
  right: 16px;
  top: 16px;
  /deep/ .ant-btn {
    width: 48px;
    height: 32px;
    padding: 0;
    font-size: 12px;
  }
  /deep/ .ant-btn-link {
    color: @newColorGreyFontM;
  }
}
.formBox {
  height: 64px;
  background: #ffffff;
  border-radius: 2px;
  box-shadow: 0px 0px 6px 1px rgba(39, 36, 36, 0.06);
  padding-top: 16px;
  position: relative;
  margin-bottom: 16px;
  padding-left: 16px;
}
.distribution-box-search {
  height: 32px;
  margin: 16px 0 24px;
  .input-search {
    width: 480px;
    /deep/ .ant-input {
      width: 436px;
    }
    /deep/ .ant-btn {
      padding: 0 8px;
      font-size: 12px;
      color: @newColorGreyFontM;
    }
    /deep/.ant-input-affix-wrapper .ant-input:not(:first-child) {
      padding-left: 40px;
    }
  }
  .search-button {
    width: 32px;
    height: 32px;
    margin-left: 8px;
    background: #f9f9f9;
    display: inline-block;
    border-radius: 2px;
    cursor: pointer;
    text-align: center;
    line-height: 32px;
    i {
      display: inline-block;
      img {
        width: 16px;
        height: 16px;
      }
    }
  }
}
.records-status {
  font-size: 14px;
  cursor: pointer;
  img {
    width: 16px;
    height: 16px;
    vertical-align: sub;
  }
}

@media screen and (max-width: 2400px) {
  /deep/.ant-input {
    font-size: 12px !important;
  }
  /deep/ .ant-table-thead {
    font-size: 12px;
  }
  /deep/ .ant-table-tbody {
    font-size: 12px;
  }
  .records-status {
    font-size: 12px;
  }
}
</style>